<template>
    <div class="answeringBox">
        <SiteNav name="提问答疑"></SiteNav>
        <div class="answeringTitle">
            <div class="titleback">
                <el-button type="text" @click="$router.go(-1)">返回</el-button>
            </div>
            <div class="title">
                <span>{{ requireData.title }}</span>
            </div>
            <div class="time">
                <i class="el-icon-eleme"></i>
                <label>
                    楼主：{{ requireData.username }}
                </label>
                <label>时间：{{ requireData.creationtime }} </label>
                <label>阅读：{{ requireData.hitses }} </label>
                <label>回复：{{ requireData.replyNum }}</label>
            </div>
        </div>
        <div class="btn" v-if="$route.query.answering.userid != userInfo.id">
            <el-button size="small" type="primary" @click="goSpaceOthers">看楼主</el-button>
        </div>
        <div class="detail">
            <div class="content">
                {{ requireData.content }}
            </div>
        </div>
        <ul class="commentBox">
            <li class="list" v-for="(item, index) in requirePL" :key="index">
                <div class="landlord">
                    <label>楼主：<el-button type="text">{{ item.username }}</el-button></label>
                    <label>时间：{{ item.creationtime }}</label>
                </div>
                <div class="contentBox">
                    <div class="commentContent">
                        <p>{{ item.content }}</p>
                    </div>

                    <div class="fabulous">
                        <label>{{ index + 1 }}楼</label>
                        <el-divider direction="vertical"></el-divider>
                        <label>
                            <el-button type="text">点赞(0)</el-button>
                        </label>
                        <el-divider direction="vertical"></el-divider>
                        <label>
                            <el-button type="text">引用回复</el-button>
                        </label>
                        <el-divider direction="vertical"></el-divider>
                        <label>
                            <el-button type="text">评论({{item.children.length}})</el-button>
                        </label>
                    </div>
                    <!--回复-->
                    <div class="reply" v-for="(itemChild, index) in item.children" :key="index">
                        <div class="people clearFix">
                            <div class="huifPeople">
                                <el-button type="text">{{ itemChild.username }}：</el-button>
                            </div>
                            <div class="huifTiem">
                                <label> 时间：{{ itemChild.creationtime }} </label>
                                <el-button type="text">回复</el-button>
                            </div>
                        </div>
                        <div class="huifContent">
                            <p>{{ itemChild.content }}</p>
                            <div class="imgs" v-if="false">
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <!--评论框-->
        <div class="enterComments">
            <!-- <div class="AIT">
                <el-button type="text">@ 朋友</el-button>
                <el-button type="text" icon="el-icon-picture">图片</el-button>
                <el-button type="text" icon="el-icon-eleme">表情</el-button>
            </div> -->
            <div class="area">
                <el-input type="textarea" maxlength="150" :show-word-limit="true" :rows="2" placeholder="请在此输入您要评论的内容"
                    v-model="content">
                </el-input>
            </div>
            <div class="btnBox">
                <el-button type="primary" size="small" @click="sumbitPublish()">发表</el-button>
            </div>
        </div>
        <Commentlist ref="commentlist" @setComment="setComment"></Commentlist>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    import Commentlist from '@/components/comment/commentlist'
    import SiteNav from "@c/navigation/siteNav";
    export default {
        components: {
            SiteNav,
            Commentlist
        },
        computed: {
            ...mapState({
                userInfo: state => state.userModule.userInfo
            })
        },
        created() {
            this.getListContent()
        },
        mounted() {},
        beforeMount() {},
        data() {
            return {
                activeName: 1,
                src: require("../../../assets/img/headportrait03.jpg"),
                content: "",
                requireData: {}, //anthor
                requirePL: {}, //评论
                pageCommentL: {},
                replysTextarea: '',
            };
        },
        methods: {
            setComment(val,val2){
                this.requireData.replyNum = val2
            },  
            // 去他人空间 或者去对应机构空间
            goSpaceOthers() {
                this.$store.commit('commonModule/INIT_STUDENTTOSPACE', false);
                var others = this.$route.query.answering
                this.$store.dispatch('commonModule/checkVisitor', {
                    userId: others.userid
                }).then(res => {
                    if (res.data.code == 200 || this.userInfo.id == others.userid) {
                        if (others) {
                            if (this.userInfo.id !== others.userid) {
                                this.$store.dispatch('visitorAllModule/visitorAdd', {
                                    fromuserid: others.userid,
                                    visitorid: others.userid,
                                    type: 4
                                })
                            }
                            this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                            this.$router.push({
                                path: "/otherZone/otherZoneHomePage",
                                query: {
                                    others: others
                                }
                            });
                            // 学校9527 班级1000 教研100011
                            // if(this.userInfo.id == others.userid){
                            //     this.$store.commit('commonModule/INIT_ISMANAGER',true);
                            // }else{
                            //     this.$store.commit('commonModule/INIT_ISMANAGER',false);
                            // }
                            // if (others.roleid == 7) {
                            //     this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                            //     this.$router.push({
                            //         path: "/school/schoolHomePage",
                            //         query: {
                            //             others: others
                            //         }
                            //     });
                            // } else if (others.roleid == 1000) {
                            //     this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                            //     this.$router.push({
                            //         path: "/class/classHomePage",
                            //         query: {
                            //             others: others
                            //         }
                            //     });
                            // } else if (others.roleid == 100011) {
                            //     this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                            //     this.$router.push({
                            //         path: "/research/researchOther/researchOtherHome",
                            //         query: {
                            //             others: others
                            //         }
                            //     });
                            // } else {
                            // this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                            // this.$router.push({
                            //     path: (others.userid ==this.userInfo.id)?article?"/students/articleMain":"/students/studentsHomePage"
                            //     :article?"/otherZone/articleMain":"/otherZone/otherZoneHomePage",
                            //     query: {
                            //         others: others
                            //     }
                            // });
                            // }
                        }
                    }else {
                        this.$message.warning('没有访问权限!')
                    }
                })
            },
            // 帖子内容
            getListContent() {
                this.$store.dispatch('invitationModule/getInvitationListContent', {
                        id: this.$route.query.id
                    })
                    .then(res => {
                        if (res.data.code === 200) {
                            // 成功后该帖子点击数加1
                            this.$store.dispatch('invitationModule/doClickInvition', {
                                id: this.$route.query.id
                            })
                            this.requireData = res.data.result;
                            this.requirePL = res.data.result.replies;
                        }
                    })
                    .catch(error => {
                        this.$message.error("服务器内部错误");
                    });
            },
            // 发表评论
            sumbitPublish() {
                if (this.content != '') {
                    this.$store.dispatch('invitationModule/publish', {
                            id: this.$route.query.id,
                            userId: this.userInfo.id,
                            content: this.content,
                        })
                        .then(res => {
                            if (res.data.code === 200) {
                                this.$message.success('发表成功')
                                this.content = ''
                                this.$refs.commentlist.pageCommentlist()
                            }
                        })
                        .catch(error => {
                            this.$message.error("服务器内部错误");
                        });
                } else {
                    this.$message.success('请先输入发表内容！')
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .avatar {
        float: left;
    }

    .block {
        text-align: left;
    }

    .answeringBox {
        background-color: white;
        box-sizing: border-box;
        padding: 15px 0;

        .answeringTitle {
            box-sizing: border-box;
            padding: 0 10px;

            .titleback {
                width: 100%;
                margin: 0 auto;
                text-align: left;
                box-sizing: border-box;
            }

            .title {
                width: 100%;
                margin: 0 auto;
                background-color: #f5f7fa;
                box-sizing: border-box;
                padding: 10px;
                color: #303133;
            }

            .time {
                width: 100%;
                margin: 0 auto;
                font-size: 14px;
                color: #909399;

                i {
                    color: #409eff;
                }

                label {
                    margin-right: 30px;

                    span {
                        margin-left: 8px;
                    }
                }
            }
        }

        .btn {
            box-sizing: border-box;
            padding: 0 10px;
            text-align: left;
        }

        .detail {
            background-color: #f5f7fa;
            box-sizing: border-box;
            padding: 10px;
            margin-top: 10px;

            .content {
                text-indent: 24px;
                text-align: justify;
                line-height: 28px;
                color: #303133;
                font-size: 14px;
            }
        }

        .commentBox {
            margin-top: 10px;
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;

            .list {
                font-size: 14px;
                color: #303133;

                .landlord {
                    margin-top: 10px;
                    margin-bottom: 5px;
                    text-align: left;
                    margin-left: 10px;

                    label {
                        margin-right: 16px;

                        span {
                            margin-left: 10px;
                        }
                    }
                }

                .contentBox {
                    background-color: #f5f7fa;
                    text-align: left;
                    box-sizing: border-box;
                    padding: 15px;

                    .commentContent,
                    .huifContent {
                        p {
                            margin-block-start: 0;
                            margin-block-end: 0;
                        }

                        .imgs {
                            width: 220px;
                            text-align: center;
                            margin-top: 8px;
                        }
                    }

                    .fabulous {
                        text-align: right;
                    }

                    .reply {
                        box-sizing: border-box;
                        padding-bottom: 10px;
                        margin-left: 85px;
                        border-bottom: 1px solid #909399;

                        .huifPeople {
                            float: left;
                        }

                        .huifTiem {
                            float: right;

                            label {
                                margin-right: 12px;

                                span {
                                    margin-left: 10px;
                                }
                            }
                        }
                    }
                }
            }
        }

        .enterComments {
            margin-top: 10px;
            box-sizing: border-box;
            padding: 15px 0;
            background-color: #f5f7fa;

            .AIT {
                border-bottom: 1px solid #909399;
                box-sizing: border-box;
                padding-left: 20px;
                text-align: left;
            }

            .area {
                box-sizing: border-box;
                padding: 0 10px;
                margin-top: 10px;
            }

            .btnBox {
                text-align: right;
                padding: 0 10px;
                margin-top: 10px;
            }
        }

        .clearFix::after {
            content: "";
            display: block;
            width: 100%;
            font-size: 0;
            clear: both;
        }
    }
</style>